﻿@{
    //page title
    ViewBag.Title = T("Admin.Configuration.Shipping.Providers").Text;
}

<div class="row">
    <div class="col-md-12">
        <div class="x_panel light form-fit">
            <div class="x_title">
                <div class="caption level-caption">
                    <i class="fa fa-list-alt"></i>
                    @T("Admin.Configuration.Shipping.Providers")
                </div>
                <vc:admin-widget widget-zone="shipping_provider_list_buttons" additional-data="null" />
            </div>
            <div class="x_content form">
                <div class="form-horizontal">
                    <div class="form-body">
                        <div class="x_content">
                            <div id="shippingproviders-grid"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function () {
    $("#shippingproviders-grid").kendoGrid({
        dataSource: {
            transport: {
                read: {
                    url: "@Html.Raw(Url.Action("Providers", "Shipping"))",
                    type: "POST",
                    dataType: "json",
                    data: addAntiForgeryToken
                },
                update: {
                    url: "@Html.Raw(Url.Action("ProviderUpdate", "Shipping"))",
                    type: "POST",
                    dataType: "json",
                    data: addAntiForgeryToken
                }
            },
            schema: {
                data: "Data",
                total: "Total",
                errors: "Errors",
                model: {
                    id: "SystemName",
                    fields: {
                        FriendlyName: { editable: false, type: "string" },
                        SystemName: { editable: false, type: "string" },
                        LogoUrl: { editable: false, type: "string" },
                        DisplayOrder: { editable: true, type: "number" },
                        IsActive: { editable: true, type: "boolean" }
                    }
                }
            },
            requestEnd: function (e) {
                if (e.type == "update") {
                    this.read();
                }
            },
            error: function (e) {
                display_kendoui_grid_error(e);
                // Cancel the changes
                this.cancelChanges();
            },
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        },
        pageable: {
            refresh: true,
            numeric: false,
            previousNext: false,
            info: false
        },
        editable: {
            confirmation: false,
            mode: "inline"
        },
        scrollable: false,
        columns: [{
            field: "FriendlyName",
            title: "@T("Admin.Configuration.Payment.Methods.Fields.FriendlyName")",
            width: 250,
            template: '<a class="k-link" href="#=ConfigurationUrl#">#=FriendlyName#</a>',
        }, {
            field: "SystemName",
            title: "@T("Admin.Configuration.Payment.Methods.Fields.SystemName")",
            width: 250,
                template: '<a class="k-link" href="#=ConfigurationUrl#">#=SystemName#</a>',
        }, {
            field: "LogoUrl",
            title: "@T("Admin.Configuration.Payment.Methods.Fields.Logo")",
            width: 100,
            template: '<img src="#=LogoUrl#" />'
        }, {
            field: "DisplayOrder",
            title: "@T("Admin.Configuration.Shipping.Providers.Fields.DisplayOrder")",
            //integer format
            format: "{0:0}",
            width: 100
        }, {
            field: "IsActive",
            title: "@T("Admin.Configuration.Shipping.Providers.Fields.IsActive")",
            width: 100,
            headerAttributes: { style: "text-align:center" },
            attributes: { style: "text-align:center" },
            template: '# if(IsActive) {# <i class="fa fa-check" aria-hidden="true" style="color:green"></i> #} else {# <i class="fa fa-times" aria-hidden="true" style="color:red"></i> #} #'
        }, {
            command: {
                name: "edit",
                text: {
                    edit: "@T("Admin.Common.Edit")",
                    update: "@T("Admin.Common.Update")",
                    cancel: "@T("Admin.Common.Cancel")"
                }
            },
            title: "@T("Admin.Common.Edit")",
            width: 150
        }]
    });
});
</script>
        